<template>
  <div class="detail-cotainer">
    <div class="articleDetail">
      <div class="artdetail-top">
        <img :src="articleInfo.firstPicture" />
      </div>
      <div class="artdetail-mid">
        <div class="detail-message">
          <img :src="articleInfo.userAvatar" />
          <div class="detailmessages">
            <span
              ><i class="iconfont">&#xe601;</i
              >{{ articleInfo.articleAuthor }}</span
            >
            <span
              ><i class="iconfont">&#xe7f5;</i
              >{{ articleInfo.tags[0].tagName }}</span
            >
            <span
              ><i class="iconfont">&#xe64d;</i
              >{{ articleInfo.createTime | formatDate }}</span
            >
            <span
              ><i class="iconfont">&#xe670;</i
              >{{ articleInfo.articleViews }}</span
            >
            <span
              ><i class="iconfont">&#xe610;</i
              >{{ articleInfo.type.typeName }}</span
            >
          </div>
        </div>
        <div class="detail-essay">
          <mavon-editor
            style="height: 100%; z-index: 1"
            :subfield="false"
            :defaultOpen="'preview'"
            :toolbarsFlag="false"
            :editable="false"
            :scrollStyle="true"
            :ishljs="true"
            :value="articleInfo.articleContent"
          ></mavon-editor>
          <div class="appreciate">
            <el-button
              class="appreciate-btn"
              @click="appreciateShow = !appreciateShow"
              >赞赏</el-button
            >
            <div class="appreciate-photo" v-show="appreciateShow">
              <div class="appreciate-photos">
                <div class="appreciate-image">
                  <img src="../../images/email.png" alt="" />
                  <span>支付宝</span>
                </div>
                <div class="appreciate-image" style="margin-left: 20px">
                  <img src="../../images/email.png" alt="" />
                  <span>微信</span>
                </div>
              </div>
              <div class="appreciate-to"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="artdetail-boot">
        <div class="detail-first">
          <el-form :model="commentForm" :rules="rules" ref="commentForm">
            <el-form-item prop="commentContext">
              <el-input
                id="commentText"
                v-model="commentForm.commentContext"
                class="left-note"
                type="textarea"
                resize="none"
                :rows="8"
                placeholder="既然来了，就留下您的脚印吧"
              />
            </el-form-item>
            <div class="message">
              <el-form-item prop="commentNickname" style="width: 100%">
                <el-input
                  v-model="commentForm.commentNickname"
                  prefix-icon="el-icon-user"
                  placeholder="姓名"
                  minlength="30%"
                />
              </el-form-item>
              <el-form-item style="width: 100%" prop="commentEmail">
                <el-input
                  v-model="commentForm.commentEmail"
                  prefix-icon="el-icon-message"
                  placeholder="邮箱"
                />
              </el-form-item>

              <el-button
                type="danger"
                size="mini"
                style="margin-left: 2%"
                round
                @click.native="resetData()"
                >取消评论</el-button
              >
              <el-button
                type="primary"
                size="mini"
                round
                @click.native="addDetailCommentBtn()"
                >发表评论</el-button
              >
            </div>
          </el-form>
        </div>
        <div class="artde-top">
          <h2>评论栏</h2>
        </div>
        <div class="article-detail-comments" v-if="commentList.length != 0">
          <div
            class="article-detail-comment"
            v-for="(item, index) in commentList"
            :key="item.commentId"
          >
            <div class="article-detail-comment-img">
              <img :src="item.commentAvatar" />
            </div>
            <div class="article-detail-content">
              <div class="article-detail-comment-name">
                <span class="article-detail-author-name">{{
                  item.commentNickname
                }}</span>
                <div
                  class="article-detail-pointing"
                  style="display: inline"
                  v-if="item.isArticler"
                >
                  博主
                </div>
                <span class="article-detail-metadata">{{
                  item.createTime | formatDate
                }}</span>
              </div>

              <div class="article-detail-comment-text">
                {{ item.commentContext }}
              </div>
              <div class="article-detail-actions">
                <el-button
                  type="text"
                  class="article-detail-reply-btn"
                  style="color: #c1c1c1"
                  @click.native="
                    replyCommentBtn(item.commentId, item.commentNickname)
                  "
                  >回复</el-button
                >
                <div
                  style="
                    display: inline-block;
                    margin-left: 10%;
                    color: #c1c1c1;
                  "
                >
                  <i
                    v-show="item.replyComments.length > 0"
                    class="iconfont"
                    v-if="item.inOpen"
                    >&#xeb93;</i
                  ><i
                    v-show="item.replyComments.length > 0"
                    class="iconfont"
                    v-else
                    >&#xeb95;</i
                  ><el-button
                    v-show="item.replyComments.length > 0"
                    type="text"
                    style="color: #c1c1c1; font-weight: small"
                    v-if="item.inOpen"
                    @click="handleOpen(index, item.inOpen)"
                    >收起</el-button
                  >
                  <el-button
                    v-show="item.replyComments.length > 0"
                    type="text"
                    style="color: #c1c1c1; font-weight: small"
                    v-else
                    @click="handleOpen(index, item.inOpen)"
                    >展开</el-button
                  >
                </div>
              </div>
            </div>
            <div
              class="article-detail-comments article-detail-comments-reply"
              v-show="item.inOpen"
            >
              <div
                class="article-detail-comment"
                v-for="item in item.replyComments"
                :key="item.commentId"
              >
                <div class="article-detail-comment-img">
                  <img :src="item.commentAvatar" />
                </div>
                <div class="article-detail-content">
                  <div class="article-detail-comment-name">
                    <span class="article-detail-author-name">{{
                      item.commentNickname
                    }}</span>
                    <div class="article-detail-pointing" v-if="item.isArticler">
                      博主
                    </div>
                    <span style="padding: 5px">回复</span>
                    <span style="color: #53c3c4">
                      @{{ item.parentComment.commentNickname }}</span
                    >
                    <div
                      class="article-detail-metadata"
                      style="display: inline"
                    >
                      <span>{{ item.createTime | formatDate }}</span>
                    </div>
                  </div>

                  <div class="article-detail-comment-text">
                    {{ item.commentContext }}
                  </div>
                  <div class="article-detail-actions">
                    <el-button
                      type="text"
                      class="article-detail-reply-btn"
                      style="color: #c1c1c1"
                      @click.native="
                        replyCommentBtn(item.commentId, item.commentNickname)
                      "
                      >回复</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <p
            style="
              text-align: center;
              color: #717171;
              margin-top: 5%;
              font-family: STXingkai;
              font-size: 25px;
            "
          >
            暂无评论，快来发表评论吧！
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/articleDetail.css";
import "@/assets/css/about.css";

import { getArticleDetail, addDetailComment } from "@/api/articleDetail";
import { formatDate } from "@/utils/date";
const comment = {
  commentId: null,
  commentNickname: "",
  commentAvatar: null,
  commentEmail: "",
  commentContext: "",
  articleId: null,
  questionsId: null,
  parentCommentId: null,
  isArticler: null,
  commentType: 1,
  commentStatus: null,
  createTime: null,
  updateTime: null,
  isNotice: false,
};
export default {
  name: "articleDetail",
  data() {
    var checkEmail = (rule, value, callback) => {
      var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!value) {
        //如果输入为空直接返回
        callback();
      } else {
        //如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
        if (reg.test(value)) {
          //匹配成功返回
          callback();
        } else {
          //匹配不成功返回错误显示
          callback(new Error("网址格式有问题！"));
        }
      }
    };
    return {
      appreciateShow: false,
      commentForm: Object.assign({}, comment),
      articleInfo: null,
      articleId: 0,
      commentList: [],
      parentId: 0,
      commentType: true,
      rules: {
        commentContext: [
          { required: true, message: "请输入内容", tigger: "change" },
          { max: 1024, message: "最多 1024 个字符", tigger: "blur" },
        ],
        commentNickname: [
          { required: true, message: "请输入你的姓名", trigger: "change" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        commentEmail: [
          { required: true, validator: checkEmail, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.articleId = this.$route.query.articleId;
    this.getArticleDetailFun();
  },
  computed: {
    commentList: {
      get: function () {
        return this.commentList;
      },
    },
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getArticleDetailFun() {
      getArticleDetail(this.articleId).then((response) => {
        this.articleInfo = response.data.articleInfo;
        this.commentList = response.data.commentList;
      });
    },

    handleOpen(index, inOpen) {
      this.commentList[index].inOpen = !inOpen;
    },
    replyCommentBtn(parentId, commentNickname) {
      var commentText = document.getElementById("commentText");
      document.documentElement.scrollTop = commentText.offsetTop;
      commentText.focus();
      commentText.setAttribute("placeholder", "@" + commentNickname);
      this.parentId = parentId;
      this.commentType = false;
    },
    addDetailCommentBtn() {
      this.$refs.commentForm.validate((valid) => {
        if (valid) {
          this.commentForm.articleId = this.articleId;
          this.commentForm.parentCommentId = 0;
          if (!this.commentType) {
            this.commentForm.parentCommentId = this.parentId;
          }
          addDetailComment(this.commentForm).then((response) => {
            if (response.code == 200) {
              this.$message({
                message: "评论成功！",
                type: "success",
              });
              this.getArticleDetailFun();
            } else {
              this.$message({
                message: "评论失败！",
                type: "warning",
              });
            }
          });
        }
      });
      this.resetData();
    },
    // 清除表单数据
    resetData() {
      // 对commentForm 设置为data中初始化的表单
      this.commentForm = this.$options.data().commentForm;
      this.parentId = 0;
    },
  },
};
</script>

<style></style>
